// pages/paper/search.vue
<template>
  <view class="container">
    <!-- 顶部搜索栏 -->
    <view class="search-header">
      <view class="search-box">
        <text class="search-icon">🔍</text>
        <input 
          type="text" 
          v-model="searchText"
          placeholder="搜索试卷、真题、解析..." 
          class="search-input"
          @confirm="handleSearch"
        />
      </view>
    </view>

    <!-- 热门搜索 -->
    <view class="hot-search" v-if="!searchText">
      <view class="section-title">
        <text class="title-text">🔥 热门搜索</text>
        <text class="refresh-text" @click="refreshHotTags">换一换 🔄</text>
      </view>
      <view class="tag-list">
        <text 
          v-for="tag in hotTags" 
          :key="tag"
          class="tag-item"
          @click="handleTagClick(tag)"
        >{{tag}}</text>
      </view>
    </view>

    <!-- 搜索历史 -->
    <view class="search-history" v-if="!searchText">
      <view class="section-title">
        <text class="title-text">⏱️ 搜索历史</text>
        <text class="clear-text" @click="clearHistory">清空</text>
      </view>
      <view class="history-list">
        <view 
          v-for="(item, index) in searchHistory" 
          :key="index"
          class="history-item"
          @click="handleHistoryClick(item)"
        >
          <text class="history-icon">🕒</text>
          <text class="history-text">{{item}}</text>
        </view>
      </view>
    </view>

    <!-- 搜索结果列表 -->
    <view class="search-result" v-if="searchText">
      <view class="result-header">
        <text class="result-title">📑 搜索结果</text>
        <text class="result-count">找到 {{papers.length}} 份试卷</text>
      </view>
      
      <view class="paper-list">
        <view 
          v-for="paper in papers" 
          :key="paper.id" 
          class="paper-item"
        >
          <view class="paper-info">
            <text class="paper-icon">📋</text>
            <view class="paper-detail">
              <text class="paper-name">{{paper.name}}</text>
              <text class="paper-desc">{{paper.description}}</text>
              <view class="paper-tags">
                <text class="paper-tag">📊 {{paper.pageCount}}页</text>
                <text class="paper-tag">⭐ {{paper.downloadCount}}次下载</text>
              </view>
            </view>
          </view>
          <button 
            class="export-btn"
            @click="handleExport(paper)"
          >导出 📥</button>
        </view>
      </view>
    </view>

    <!-- 暂无数据 -->
    <view class="empty-state" v-if="searchText && papers.length === 0">
      <text class="empty-icon">🔍</text>
      <text class="empty-text">暂无相关试卷</text>
      <text class="empty-tips">换个关键词试试吧～</text>
    </view>
    
    <!-- 导出成功提示框 -->
    <view class="export-dialog" v-if="showExportDialog">
      <view class="dialog-content">
        <view class="dialog-header">
          <text class="dialog-title">导出成功 ✅</text>
          <text class="dialog-close" @click="showExportDialog = false">×</text>
        </view>
        <view class="dialog-body">
          <text class="success-text">《{{currentPaper.name}}》已成功导出到：</text>
          <view class="export-path">
            <text class="path-text">{{exportPath}}</text>
            <view class="path-actions">
              <button class="action-btn copy-btn" @click="copyPathToClipboard">复制路径 📋</button>
              <button class="action-btn open-btn" @click="openExportFolder">查看位置 📂</button>
            </view>
          </view>
          <text class="help-text">提示：您可以在手机的文件管理器中找到此文件</text>
        </view>
      </view>
    </view>
    
    <!-- 路径说明对话框 -->
    <view class="export-dialog" v-if="showPathInfoDialog">
      <view class="dialog-content">
        <view class="dialog-header">
          <text class="dialog-title">文件位置说明 📍</text>
          <text class="dialog-close" @click="showPathInfoDialog = false">×</text>
        </view>
        <view class="dialog-body">
          <text class="info-title">文件已保存到以下位置：</text>
          <view class="path-detail">
            <text class="path-text">{{exportPath}}</text>
          </view>
          <view class="path-instructions">
            <text class="instruction-title">如何查找此文件：</text>
            <text class="instruction-step">1. 打开您手机的文件管理器</text>
            <text class="instruction-step">2. 前往"下载"或"Download"文件夹</text>
            <text class="instruction-step">3. 在"考研资料"文件夹中找到您的文件</text>
          </view>
          <button class="full-btn copy-path-btn" @click="copyPathToClipboard">
            复制完整路径 📋
          </button>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue'

// 搜索文本
const searchText = ref('')

// 热门标签
const hotTags = ref([
  '📚 英语一真题',
  '📐 数学一真题',
  '📖 政治肖四',
  '📑 专业课真题',
  '✍️ 模拟试题',
  '💯 历年真题'
])

// 搜索历史
const searchHistory = ref([
  '2024英语一真题',
  '数学一历年真题',
  '计算机专业课'
])

// 试卷列表
const papers = ref([
  {
    id: 1,
    name: '2024考研英语一真题',
    description: '含完整答案解析、考点分析、历年真题对比',
    pageCount: 25,
    downloadCount: 2890,
    icon: '/static/pdf-icon.png',
    filename: 'kaoyan_english_2024.pdf'
  },
  {
    id: 2,
    name: '2024考研数学一真题',
    description: '包含详细解题步骤、重要公式总结',
    pageCount: 32,
    downloadCount: 3150,
    icon: '/static/pdf-icon.png',
    filename: 'kaoyan_math_2024.pdf'
  }
])

// 导出相关状态
const showExportDialog = ref(false)
const showPathInfoDialog = ref(false)
const currentPaper = ref({})
const exportPath = ref('')

// 搜索处理
const handleSearch = () => {
  if (!searchText.value.trim()) {
    uni.showToast({
      title: '请输入搜索关键词 ✍️',
      icon: 'none'
    })
    return
  }
  // 模拟搜索请求
  console.log('搜索:', searchText.value)
  // 添加到搜索历史
  if (!searchHistory.value.includes(searchText.value)) {
    searchHistory.value.unshift(searchText.value)
  }
}

// 标签点击
const handleTagClick = (tag) => {
  searchText.value = tag.replace(/^[^\s]+\s/, '') // 移除表情符号
  handleSearch()
}

// 历史记录点击
const handleHistoryClick = (text) => {
  searchText.value = text
  handleSearch()
}

// 清空历史
const clearHistory = () => {
  uni.showModal({
    title: '提示 ⚠️',
    content: '确定要清空搜索历史吗？',
    success: (res) => {
      if (res.confirm) {
        searchHistory.value = []
        uni.showToast({
          title: '已清空 🗑️',
          icon: 'none'
        })
      }
    }
  })
}

// 刷新热门标签
const refreshHotTags = () => {
  // 模拟刷新
  const tempTags = [...hotTags.value]
  hotTags.value = tempTags.reverse()
  uni.showToast({
    title: '已更新 ✨',
    icon: 'none'
  })
}

// 导出处理
const handleExport = (paper) => {
  uni.showLoading({
    title: '导出中... ⏳'
  })
  
  // 保存当前试卷信息
  currentPaper.value = paper
  
  // 设置导出路径 - 在实际应用中，这应该来自实际的下载操作
  // 为不同平台设置合适的路径
  let downloadDir = ''
  
  // 检测平台并设置合适的路径
  if (uni.getSystemInfoSync().platform === 'android') {
    downloadDir = '/storage/emulated/0/Download/考研资料'
  } else if (uni.getSystemInfoSync().platform === 'ios') {
    downloadDir = '~/Documents/考研资料'
  } else {
    downloadDir = '下载/考研资料'
  }
  
  exportPath.value = `${downloadDir}/${paper.filename}`
  
  // 模拟导出过程
  setTimeout(() => {
    uni.hideLoading()
    
    // 显示导出成功对话框
    showExportDialog.value = true
  }, 1500)
}

// 打开导出文件夹 - 前端友好版本
const openExportFolder = () => {
  // 在前端环境中，我们无法直接打开本地文件夹
  // 而是显示详细的路径信息和使用说明
  showPathInfoDialog.value = true
  showExportDialog.value = false
}

// 复制路径到剪贴板
const copyPathToClipboard = () => {
  uni.setClipboardData({
    data: exportPath.value,
    success: () => {
      uni.showToast({
        title: '路径已复制 ✅',
        icon: 'success'
      })
    }
  })
}
</script>

<style>
.container {
  min-height: 100vh;
  background-color: #f5f5f5;
  padding-bottom: 40rpx;
  position: relative;
}

.search-header {
  background-color: #A8BF8F;
  padding: 20rpx 30rpx;
  position: sticky;
  top: 0;
  z-index: 100;
}

.search-box {
  display: flex;
  align-items: center;
  background-color: #ffffff;
  border-radius: 30rpx;
  padding: 10rpx 20rpx;
}

.search-icon {
  font-size: 36rpx;
  margin-right: 10rpx;
}

.search-input {
  flex: 1;
  height: 60rpx;
  font-size: 28rpx;
}

.hot-search, .search-history {
  background-color: #ffffff;
  margin-top: 20rpx;
  padding: 20rpx;
}

.section-title {
  margin-bottom: 20rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.title-text {
  font-size: 30rpx;
  font-weight: bold;
}

.refresh-text, .clear-text {
  font-size: 24rpx;
  color: #999;
}

.tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 20rpx;
}

.tag-item {
  padding: 12rpx 24rpx;
  background-color: #f8f8f8;
  border-radius: 20rpx;
  font-size: 26rpx;
  color: #666;
  transition: all 0.3s;
}

.tag-item:active {
  background-color: #eee;
}

.history-list {
  display: flex;
  flex-direction: column;
}

.history-item {
  display: flex;
  align-items: center;
  padding: 16rpx 0;
  border-bottom: 1rpx solid #f5f5f5;
}

.history-icon {
  margin-right: 12rpx;
  font-size: 28rpx;
}

.history-text {
  font-size: 26rpx;
  color: #666;
}

.search-result {
  margin-top: 20rpx;
}

.result-header {
  padding: 20rpx;
  background-color: #ffffff;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.result-title {
  font-size: 30rpx;
  font-weight: bold;
}

.result-count {
  font-size: 26rpx;
  color: #666;
}

.paper-list {
  margin-top: 20rpx;
}

.paper-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx;
  background-color: #ffffff;
  margin-bottom: 2rpx;
}

.paper-info {
  display: flex;
  align-items: flex-start;
  flex: 1;
}

.paper-icon {
  font-size: 48rpx;
  margin-right: 20rpx;
}

.paper-detail {
  flex: 1;
}

.paper-name {
  font-size: 28rpx;
  font-weight: bold;
  margin-bottom: 8rpx;
}

.paper-desc {
  font-size: 24rpx;
  color: #666;
  margin-bottom: 8rpx;
}

.paper-tags {
  display: flex;
  gap: 16rpx;
}

.paper-tag {
  font-size: 22rpx;
  color: #999;
}

.export-btn {
  padding: 10rpx 30rpx;
  background-color: #A8BF8F;
  color: #ffffff;
  border-radius: 30rpx;
  font-size: 26rpx;
  margin: 0;
  min-width: 120rpx;
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 100rpx 0;
}

.empty-icon {
  font-size: 80rpx;
  margin-bottom: 20rpx;
}

.empty-text {
  font-size: 28rpx;
  color: #999;
  margin-bottom: 10rpx;
}

.empty-tips {
  font-size: 24rpx;
  color: #999;
}

/* 导出成功对话框样式 */
.export-dialog {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 1000;
}

.dialog-content {
  width: 80%;
  background-color: #fff;
  border-radius: 16rpx;
  overflow: hidden;
  max-height: 80vh;
}

.dialog-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24rpx;
  background-color: #A8BF8F;
  color: white;
}

.dialog-title {
  font-size: 32rpx;
  font-weight: bold;
}

.dialog-close {
  font-size: 40rpx;
  font-weight: bold;
}

.dialog-body {
  padding: 30rpx;
  max-height: calc(80vh - 80rpx);
  overflow-y: auto;
}

.success-text {
  font-size: 28rpx;
  margin-bottom: 20rpx;
  display: block;
}

.help-text {
  font-size: 24rpx;
  color: #999;
  margin-top: 20rpx;
  display: block;
  text-align: center;
}

.export-path {
  background-color: #f5f5f5;
  padding: 20rpx;
  border-radius: 8rpx;
  margin-top: 16rpx;
}

.path-text {
  font-size: 26rpx;
  color: #666;
  word-break: break-all;
  display: block;
  margin-bottom: 16rpx;
}

.path-actions {
  display: flex;
  justify-content: space-between;
  margin-top: 20rpx;
  border-top: 1px solid #e0e0e0;
  padding-top: 20rpx;
}

.action-btn {
  flex: 1;
  margin: 0 8rpx;
  font-size: 26rpx;
  padding: 12rpx 0;
  border-radius: 6rpx;
  background-color: #f0f0f0;
  color: #666;
  border: none;
}

.copy-btn {
  background-color: #f0f0f0;
}

.open-btn {
  background-color: #A8BF8F;
  color: white;
}

/* 路径说明对话框样式 */
.info-title {
  font-size: 28rpx;
  font-weight: bold;
  margin-bottom: 16rpx;
  display: block;
}

.path-detail {
  background-color: #f5f5f5;
  padding: 20rpx;
  border-radius: 8rpx;
  margin: 16rpx 0 24rpx 0;
}

.path-instructions {
  margin: 20rpx 0;
}

.instruction-title {
  font-size: 28rpx;
  font-weight: bold;
  margin-bottom: 16rpx;
  display: block;
}

.instruction-step {
  font-size: 26rpx;
  color: #666;
  margin-bottom: 12rpx;
  display: block;
  padding-left: 20rpx;
}

.full-btn {
  width: 100%;
  margin-top: 20rpx;
  padding: 20rpx 0;
  border-radius: 8rpx;
  background-color: #A8BF8F;
  color: white;
  font-size: 28rpx;
  border: none;
}
</style>